<template>
  <div style="text-align: center">
    <div class="cover"></div>
    <h1 style="color: green;margin-top: 100px">登录界面</h1>
    <div style="text-align: center">
      <Card class="login_contain" :bordered="true">
        <div>
          <label>姓名：</label>
          <Input v-model="login_name" placeholder="请输入用户名"
                 style="width: 200px"/>
        </div>
        <div style="margin-top: 16px">
          <label>密码：</label>
          <Input v-model="login_psw" placeholder="请输入密码" type="password"
                 style="width: 200px; "/>
        </div>
        <Button type="success" long class="btnlogin" @click="login"  @keyup.enter="login">登录</Button>
        <div style="margin-top: 20px" @click="btn_register">
          <span>注册</span>
          <Icon type="ios-arrow-dropright"></Icon>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        login_name: "",
        login_psw: ""
      }
    },
    methods: {
      btn_register() {
        this.$router.push('register')
      },
      login() {
        var vm = this
        if (this.login_name === null || this.login_psw === null) {
          this.$Message.info("请将信息填写完整")
          return
        }
        this.$http.post('/v1/users/login', {
          username: this.login_name,
          password: this.login_psw
        }).then(function (response) {
          if (response.data.code === 1000) {
            vm.$Message.success(vm.login_name + " 登录成功")
            //localStorage 这种方式只能存储字符串
            localStorage.setItem("userInfo", JSON.stringify(response.data.data.user))
            vm.$router.push({name: 'Home', params: {userName: vm.login_name}})
          } else {
            vm.$Message.error(response.data.message)
          }
        }).catch(function (e) {
          alert(e.message)
        })
      }
    },
    created() {
      if (this.$route.params.userName != undefined) {
        this.login_name = this.$route.params.userName
      }
    }
  }
</script>

<style scoped>
  .login_contain {
    margin-top: 60px;
    background-color: white;
    padding: 40px 40px 4px 40px;
    display: inline-block;
  }

  .btnlogin {
    margin-top: 20px;
    width: 240px;
  }
</style>
